<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" import=" java.util.*"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<!-- <script src="/eritasks/resources/js/jquery.js"></script> -->



<!-- KendoUi -->
<!-- <script
	src="https://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<link
	href=" http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"
	rel="stylesheet">
<link
	href="//cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"
	rel="stylesheet" /> -->

<!-- If IE use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Set the page to the width of the device and set the zoon level -->
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Bootstrap Tutorial</title>
<link href="/eritasks/resources/css/site.css" rel="stylesheet">
<link href="/eritasks/resources/css/style.min.css" rel="stylesheet" />
<link href="/eritasks/resources/css/squire-ui.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link
	href=" https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css"
	rel="stylesheet">
<link
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
	rel="stylesheet">
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
img:hover {
	cursor: pointer;
}

body {
	background: none repeat scroll 0 0 white;
}

nav.sidebar-menu-collapsed {
	width: 50px;
}

nav.sidebar-menu-expanded {
	width: 106px;
}

.fixed-size {
	width: 150px;
	height: 150px;
}

nav.sidebar {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	background: none repeat scroll 0 0 #004c00;
	color: white;
	padding: 20px 10px;
}

nav.sidebar a#justify-icon {
	outline: 0;
	color: white;
	font-size: 24px;
	font-style: normal;
}

nav.sidebar a#logout-icon {
	outline: 0;
	color: white;
	font-size: 24px;
	font-style: normal;
	position: absolute;
	bottom: 10px;
	left: 10px;
}

nav.sidebar ul {
	margin: 0;
	padding: 0;
	margin-top: 60px;
}

nav.sidebar ul li {
	margin: 0;
	padding: 0;
	margin-top: 20px;
	list-style-type: none;
}

nav.sidebar ul li a.expandable {
	outline: 0;
	color: white;
	text-decoration: none;
	font-size: 20px;
}

nav.sidebar ul li a.expandable:hover {
	color: #bbbbbb;
}

nav.sidebar ul li a.expandable span.expanded-element {
	margin-left: 2px;
	display: none;
	font-size: 11px;
	position: relative;
	bottom: 2px;
}

nav.sidebar ul li.active {
	background: none repeat scroll 0 0 black;
	border-radius: 4px;
	text-align: center;
	margin-left: -4px;
	padding: 4px;
}

nav.sidebar ul li.active a.expandable {
	color: white !important;
}

nav.sidebar ul li.active a.expandable:hover {
	color: white !important;
}

.jumbotron {
	background-color: #2E2D88;
	color: white;
}
/* Adds borders for tabs */
.tab-content {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

.nav-tabs {
	margin-bottom: 0;
}

.mycontent-right {
	border-right: 0.5px solid #F2F7F9;
	/*border-left: 0.5px solid #F2F7F9;*/
	/*border-top: 0.5px solid #F2F7F9;*/
	/*border-bottom: :1px solid #F2F7F9;*/
}

.mycontent-left {
	border-left: 0.5px solid #F2F7F9;
	/*border-left: 0.5px solid #F2F7F9;*/
	/*border-top: 0.5px solid #F2F7F9;*/
	/*border-bottom: :1px solid #F2F7F9;*/
}

.mycontent-bottom {
	/*border-left: 0.5px solid #F2F7F9;*/
	/*border-left: 0.5px solid #F2F7F9;*/
	/*border-top: 0.5px solid #F2F7F9;*/
	border-bottom: 1px solid #F2F7F9;
}

.vertical-align {
	display: flex;
	align-items: center;
}

.classWithPad {
	margin-right: 5px;
	padding-right: 5px;
}

.classWithBottmPad {
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.taskWithBottmPad {
	margin-bottom: 2px;
	padding-bottom: 2px;
}

.taskWithPad {
	margin-left: 5px;
	padding-left: 5px;
}

.modal-header {
	background-color: green;
}

.placeholder {
	color: grey;
}

select option:first-child {
	color: grey;
}

select option {
	color: #555;
}

.date-form {
	margin: 10px;
}

label.control-label span {
	cursor: pointer;
}

.datepickerdemoBasicUsage {
	/** Demo styles for mdCalendar. */
	
}

.datepickerdemoBasicUsage md-content {
	padding-bottom: 200px;
}

.datepickerdemoBasicUsage .validation-messages {
	font-size: 11px;
	color: darkred;
	margin: 10px 0 0 25px;
}
</style>
<script type="text/javascript"></script>
<!-- <script type="text/javascript">
	function chartUrl(chartUrl) {
		var todo = document.getElementById('toDo').value;
		$.ajax({
			url : populatedImage,
			data : {},
			type : "GET",
			contentType : "image/jpg",
			dataType : "text",
			success : function(data) {
				/* alert(data); */
				$("#imgalign").html('<img src="data:image/jpeg;base64,' + data + '" />');
			}
		});
	}
</script> -->

<script type="text/javascript">
	/* angular.module("myApp", [ "kendo.directives" ])
	.controller("MyCtrl", function($scope){
		alert("projectid::::in kendo---------"+$scope.projectselected.projectId);
	    $scope.ulist = {
	        placeholder: "Select users...",
	        dataTextField: "signum",
	        dataValueField: "signum",
	        valuePrimitive: true,
	        autoBind: false,
	        dataSource: {
	            type: "odata",
	            serverFiltering: true,
	            transport: {
	                read: {
	                    url: 'getUsers?projectId='+$scope.projectselected.projectId,
	                }
	            }
	        }
	    };
	    $scope.selectedIds = [ 4, 7 ];
	  })
	 */

	/* angular.module("myApp", [ "kendo.directives" ])
	.controller("MyCtrl", function($scope){
	    $scope.selectOptions = {
	        placeholder: "Select products...",
	        dataTextField: "ProductName",
	        dataValueField: "ProductID",
	        valuePrimitive: true,
	        autoBind: false,
	        dataSource: {
	            type: "odata",
	            serverFiltering: true,
	            transport: {
	                read: {
	                    url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
	                }
	            }
	        }
	    };
	    $scope.selectedIds = [ 4, 7 ];
	  })
	
	 */
</script>
<!-- <script type="text/javascript">
  
  app.controller('MyControllerTable',function($scope, $http){
  	$scope.showTaskList = function(){
  		$http({method: 'GET', url :'populate'}).
  		success(function(data, status, headers, config){
  			$scope.allTaskList = data;
  			//alert("data"+$scope.allTaskList);
  		}).
  		error(function(data, status, headers, config){
  			alert("error"+status)
  		});
  	};
  });
	
  </script> -->


</head>
<body ng-app="myApp" data-ng-controller="MyController">

	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="/eritasks/resources/js/jstree.js"></script>
	<script src="/eritasks/resources/js/multiselect.js"></script>
	<script src="/eritasks/resources/js/multiselect.min.js"></script>
	<script src="/eritasks/resources/js/script.js"></script>
	<script src="/eritasks/resources/js/squire.js"></script>
	<script src="/eritasks/resources/js/Squire-UI.js"></script>
	<script src="/eritasks/resources/js/squire-raw.js"></script>
	<script src="/eritasks/resources/js/jQuery.MultiFile.min.js"></script>
	<!-- <script src="//code.jquery.com/jquery-1.10.2.js"></script>-->
	<script
		src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script
		src=" https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
	<script
		src=" https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

	<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



	<script type="text/javascript">
		var app = angular.module('myApp', []);

		app.controller('MyController', function($scope, $http, $window) {
			//$window.alert("data");
			$scope.getProjectDataFromServer = function() {
				//alert("data");
				$http({
					method : 'GET',
					url : 'getProjects'
				}).success(function(data, status, headers, config) {
					$scope.ls = data;
					//alert("data"+$scope.ls);
				}).error(function(data, status, headers, config) {
					alert("error" + status);
				});
			};
			$scope.getUserList = function() {
				//$scope.availableUsers = [];
				//alert("projectid::::"+$scope.projectselected.projectId);
				$http(
						{
							method : 'GET',
							url : 'getUsers?projectId='
									+ $scope.projectselected.projectId
						}).success(function(data, status, headers, config) {
					$scope.ulist = data;
					//alert("data"+$scope.ls);
				}).error(function(data, status, headers, config) {
					alert("error get ulist::" + status);
				});
			};

			$scope.uploadFile = function() {
				//alert("here===========");
				var uploadUrl = 'uploadUserImage/enqruvr';
				var formData = new FormData();
				//formData.append("file",files[0]);
				alert("formdata" + formData);
				$http({
					method : 'POST',
					url : uploadUrl,
					headers : {
						'Content-Type' : undefined
					},
					data : formData,
					transformRequest : function(data, headersGetterFunction) {
						return data;
					}
				}).success(function(data, status) {
					alert("success");
				}).error(function() {
					console.log("Error" + status)
				});

			};

			/* $scope.showTaskList = function(){
				$http({method: 'GET', url :'populate'}).
				success(function(data, status, headers, config){
					$scope.allTaskList = data;
					//alert("data"+$scope.allTaskList);
				}).
				error(function(data, status, headers, config){
					alert("error"+status)
				});
			}; */
		});
	</script>

	<script type="text/javascript">
		
	</script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script
		src="//github.com/fyneworks/multifile/blob/master/jQuery.MultiFile.min.js"
		type="text/javascript" language="javascript"></script>

	<!-- <script type="text/javascript">
		var datefield = document.createElement("input")
		datefield.setAttribute("type", "date")
		if (datefield.type != "date") { //if browser doesn't support input type="date", load files for jQuery UI Date Picker
			document
					.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
			document
					.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
			document
					.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
		}
	</script> -->
	<!-- <script type="text/javascript">
	$(document).ready(function () {
	UI = new SquireUI({replace: 'textarea#comments', height: 300});
	});
	</script>
	 -->

	<script type="text/javascript">
		$('select').change(function() {
			if ($(this).children('option:first-child').is(':selected')) {
				$(this).addClass('placeholder');
			} else {
				$(this).removeClass('placeholder');
			}
		});
	</script>


	<script type="text/javascript">
		function EnableDisableTextBox(chkReminder) {
			var reminderDate = document.getElementById("reminder");
			var reminderTym = document.getElementById("reminderTime");
			reminderDate.disabled = chkReminder.checked ? false : true;
			if (!reminderDate.disabled) {
				reminderDate.focus();
			}
			reminderTym.disabled = chkReminder.checked ? false : true;
			if (!reminderTym.disabled) {
				reminderTym.focus();
			}

		}
	</script>

	<script>
		$(document)
				.ready(
						function() {
							var project;
							var staus_;
							var priority_;
							var percentage_;
							var chkbox;
							var reminderTym;
							$('#chkReminder').click(
									function() {
										if (!$(this).is(':checked')) {
											chkbox = false;
											$("#reminder").attr('disabled',
													'disabled');
											$("#reminderTime").attr('disabled',
													'disabled');
										} else {
											chkbox = true;
											$("#reminder").removeAttr(
													'disabled');
											$("#reminderTime").removeAttr(
													'disabled');
										}
									});

							//-----------------------------modal close--------------------------------------				
							$('#closebtn').click(function() {
								location.reload();
							});
							//------------------------------------------------------------------------------

							project = $("#project option:selected").text()
							staus_ = $("#status option:selected").text();
							priority_ = $("#priority option:selected").text();
							percentage_ = $("#percentage option:selected")
									.text();
							reminderTym = $("#reminderTime option:selected")
									.text();

							$("#project").change(function() {
								project = $(this[this.selectedIndex]).text();
								// alert($("#status option:selected").val());    
							});

							$("#status").change(function() {
								staus_ = $(this[this.selectedIndex]).text();
								// alert($("#status option:selected").val());    
							});

							$("#priority").change(function() {
								priority_ = $(this[this.selectedIndex]).text();
								// alert($("#status option:selected").val());    
							});

							$("#percentage").change(
									function() {
										percentage_ = $(
												this[this.selectedIndex])
												.text();
										// alert($("#status option:selected").val());    
									});

							$("#reminderTime").change(
									function() {
										reminderTym = $(
												this[this.selectedIndex])
												.text();
										// alert($("#status option:selected").val());    
									});

							$("#Submit")
									.click(
											function() {
												var subject = $("#subject")
														.val();
												// var project = $("#project").val();
												var startDate = $("#startDate")
														.val();
												var dueDate = $("#dueDate")
														.val();
												var reminderDt = $("#reminder")
														.val();
												var comments = $("#comments")
												.val();
												//var foo = $('select#multiselect_to_1').text();
												var user_signum = [];
												var i = 0;
												$('#multiselect_to_1')
														.children('option')
														.each(
																function() {
																	user_signum[i++] = this.text; // "this" is the current element in the loop
																	//alert("user_signum"+user_signum[i-1]);
																});
												
												if (typeof chkbox == 'undefined') {
													chkbox = false;
												}

												console
														.log("files length"
																+ $('#files')
																		.prop(
																				"files").length);
												var attachedFiles = $('#files')
														.prop("files");
												var f = new FormData();

												for (var i = 0; i < attachedFiles.length; i++) {
													f.append('files',
															attachedFiles[i]);
												}

												f.append("subject", subject);
												f.append("project", project);
												f
														.append("startDate",
																startDate);
												f.append("dueDate", dueDate);
												f.append("staus_", staus_);
												f
														.append("priority_",
																priority_);
												f.append("percentage_",
														percentage_);
												f.append("reminderDt",
														reminderDt);
												f.append("user_signum",
														user_signum);
												f.append("comments", comments);
												console.log("f::" + f);

												$
														.ajax({
															type : "POST",
															url : 'ProcessNewtaskFormData',
															data : f,
															processData : false,
															contentType : false,
															success : function(
																	response) {

																alert("success");
															},
															error : function(e) {
																alert("error occured"
																		+ e);
															}
														});
											});

							//$('.multiselect').multiselect();
							$('#user_signum')
									.multiselect(
											{
												search : {
													left : '<input type="text" name="q" id ="s1" class="form-control" placeholder="Select User" />',
													right : '<input type="text" name="q" id ="s2" class="form-control" placeholder="Select User" />',
												}
											});

							/*  var nowDate = new Date();
							 var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
							 */$('#startDate').datepicker({
								minDate : 0
							});
							$('#dueDate').datepicker({
								minDate : 0
							});
							$('#reminder').datepicker();
							var table = $('#example').DataTable();
							/* $('#files').inputFileText({
							    text: 'Attach File'
							}); */
							//----------------------------------------------update modal window code-----------------------------------					
							$('#example')
									.on(
											'click',
											'tr',
											function() {

												// var id = table.row( this ).data()
												var parent = $(this).closest(
														'tr');
												var data1 = parent.find('td')
														.eq(0).html();
												var data2 = parent.find('td')
														.eq(1).html();
												var data3 = parent.find('td')
														.eq(2).html();
												var data4 = parent.find('td')
														.eq(3).html();
												var data5 = parent.find('td')
														.eq(4).html();
												var data6 = parent.find('td')
														.eq(5).html();
												var data7 = parent.find('td')
														.eq(6).html();

												/* alert("data1 ="+data1);
												alert("data2 ="+data2);
												alert("data3 ="+data3);
												alert("data4 ="+data4);
												alert("data5 ="+data5);
												alert("data6 ="+data6);
												alert("data7 ="+data7); */

												$("#project option")
														.prop('selected', false)
														.filter(
																function() {
																	return $(
																			this)
																			.text() == data1;
																}).prop(
																'selected',
																true);

												$('#subject').val(data2);
												$('#multiselect_to_1').val();
												$('#startDate').val(data3);
												$('#dueDate').val(data4);
												//$('#status option:selected').text(data5);
												$("#status option")
														.prop('selected', false)
														.filter(
																function() {
																	return $(
																			this)
																			.text() == data5;
																}).prop(
																'selected',
																true);

												$("#priority option")
														.prop('selected', false)
														.filter(
																function() {
																	return $(
																			this)
																			.text() == data6;
																}).prop(
																'selected',
																true);

												$("#percentage option")
														.prop('selected', false)
														.filter(
																function() {
																	return $(
																			this)
																			.text() == data7;
																}).prop(
																'selected',
																true);

												$("#user_signum").hide();
												$("#multiselect_to_1").hide();
												$("#right_All_1").hide();
												$("#left_Selected_1").hide();
												$("#right_Selected_1").hide();
												$("#left_All_1").hide();
												$("#s1").hide();
												$("#s2").hide();
												$('#myModal').modal("show");
											});
							//----------------------------------------------------------------------------------------------------
							$("#attachFilesContainer input:file")
									.each(
											function() {
												if ($(this)[0].files[0]) {
													fileArray
															.push({
																"Attachment" : $(this)[0].files[0]
															});
												}
											});
							//-----------------------------------------------------------------------					
							$('#navMenu')
									.click(
											(function() {
												var collapseMyMenu, expandMyMenu, hideMenuTexts, showMenuTexts;
												expandMyMenu = function() {
													return $("nav.sidebar")
															.removeClass(
																	"sidebar-menu-collapsed")
															.addClass(
																	"sidebar-menu-expanded");
												};
												collapseMyMenu = function() {
													return $("nav.sidebar")
															.removeClass(
																	"sidebar-menu-expanded")
															.addClass(
																	"sidebar-menu-collapsed");
												};
												showMenuTexts = function() {
													return $(
															"nav.sidebar ul a span.expanded-element")
															.show();
												};
												hideMenuTexts = function() {
													return $(
															"nav.sidebar ul a span.expanded-element")
															.hide();
												};
												return $("#justify-icon")
														.click(
																function(e) {
																	if ($(this)
																			.parent(
																					"nav.sidebar")
																			.hasClass(
																					"sidebar-menu-collapsed")) {
																		expandMyMenu();
																		showMenuTexts();
																		$(this)
																				.css(
																						{
																							color : "#000"
																						});
																	} else if ($(
																			this)
																			.parent(
																					"nav.sidebar")
																			.hasClass(
																					"sidebar-menu-expanded")) {
																		collapseMyMenu();
																		hideMenuTexts();
																		$(this)
																				.css(
																						{
																							color : "#FFF"
																						});
																	}
																	return false;
																});
											}));
						});
	</script>
	<!-- <script>
		function myFunction(x) {
			// x.style.background = "yellow";
			//x.datepicker();
			$(".date-picker").datepicker();
		}
	</script> -->


	<!-- <script>
		if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
			jQuery(function($) { //on document.ready
				$('#startDate').datepicker();

			})
		}
	</script>
	<script>
		if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
			jQuery(function($) { //on document.ready
				$('#dueDate').datepicker();
			})
		}
	</script>
	<script>
		if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
			jQuery(function($) { //on document.ready
				$('#reminder').datepicker();
			})
		}
	</script> -->

	<!-- <script type="text/javascript">
		$(document).ready(function() {
			$('#buttonId').on('click', function() {
				//alert("Test");
				$('#myModal').modal({
					width : 533,
					height : 153
				}).open();
				//    window.location = 'NewTask.html';
			});
		});
	</script> -->
	<!--<script type="text/javascript">
function open_modal() {

    $(this).modal({width:533, height:153, src:"NewTask.html"}).open();

}
</script> -->
	<!-- -------------------------------------------------------------------- -->
	<!-- <script type="text/javascript">
jQuery(document).ready(function($) {
    $('.multiselect').multiselect();
});
</script> -->
	<!-- <script>
      $(function() {
        $('.chosen-select').chosen();
        $('.chosen-select-deselect').chosen({ allow_single_deselect: true });
      });
    </script> -->
	<!-- --------------------------------------------------------------------- -->


	<br />
	<div class="container ">
		<div class="col-md-3 col-lg-2 mycontent-right">

			<div class="classWithPad">
				<div class="row">
					<img src="populatedImage" id="profileimage"
						class="img-responsive  fixed-size img-circle  img-thumbnail center-block"
						alt="http://placehold.it/40x40" onclick="this.focus()"
						onError="this.src='http://placehold.it/150X150';">
					<!-- <div data-ng-init="getUserImage()"><img data-ng-src="{{imageUrl}}:image/jpeg;base64"><</div> -->
					<form action="uploadUserImage" method="post"
						enctype="multipart/form-data">
						<!-- <input type="file" name="b12" id="b12" onchange="angular.element(this).scope().uploadFile()"> -->
						<input type="file" name="b12" id="b12" onchange="submit()">
						<!-- <i class="fa fa-camera"></i></input> -->
					</form>
					<h4 class="text-center">
						<div id="test">
							<p ng-model="signum">Welcome: <c:out value="${signum}" /></p>
						</div>
					</h4>
					<p class="text-center">Software Developer</p>

					<hr />
				</div>
			</div>
		</div>
		<div class="col-md-9 col-lg-10 mycontent-left">
			<div class="row vertical-align mycontent-bottom classWithBottmPad">
				<!-- <div class="clearfix"/> -->
				<div class="container">
					<div class="col-md-6 col-lg-6">
						<a href="#"><span class="glyphicon glyphicon-calendar"></span>
						</a><span class="text-muted">Todays Date</span>


					</div>
					<div class="col-md-9col-lg-6 ">
						<!-- <a id="modal-open" href="#myDiv" rel="modal:open">Make Modal Appear</a> -->
						<!-- <a id="modal-open" href="NewTask.html" rel="modal:open">Make Modal Appear</a> -->
						<button id="buttonId" type="button"
							class="btn btn-success btn-sm pull-right" data-toggle="modal"
							data-target="#myModal">
							<i class="fa fa-plus"></i> New Task
						</button>


						<!-- Modal -->
						<div class="modal fade" id="myModal" role="dialog">
							<div class="modal-dialog">

								<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4 class="modal-title">Create New Task</h4>
									</div>
									<div class="modal-body">
										<div>
											<div id="main">

												<form commandName="UserDTO" method="post">
													<div class="row">
														<div class="col-lg-4">
															<!-- <input type="text" placeholder="Project"  name="projectName" class="form-control"> -->
															<div data-ng-init="getProjectDataFromServer()">
																<!-- <select id="project" name="projectName">
						<option value="">-- Select Project --</option>
						<option data-ng-repeat="project in ls" value="{{project.projectName}}">{{project.projectName}}</option>
					</select> -->
																<select id="project" class="form-control" data-ng-model="projectselected"
																	data-ng-options="project as project.projectName for project in ls track by project.projectId"
																	data-ng-click="getUserList()">
																	<option value="">-- Select Project --</option>
																</select>
															</div>
														</div>
													</div>
													<br>

													<!-- <div class="row">
														<div class="col-lg-8">															
														</div>
													</div> -->


													<div class="row">
														<div class="col-lg-8">
															<input type="text" placeholder="Subject" id="subject"
																name="subject" class="form-control">
														</div>
													</div>
													<br>
													<div class="row">
														<div class="col-xs-5">
															<select id="user_signum" name="user_signum"
																data-ng-model="userselected"
																data-ng-disabled="!projectselected"
																data-ng-options="signum for signum in ulist"
																class="multiselect form-control" id="multiselect"
																size="8" multiple="multiple"
																data-right="#multiselect_to_1"
																data-right-all="#right_All_1"
																data-right-selected="#right_Selected_1"
																data-left-all="#left_All_1"
																data-left-selected="#left_Selected_1">

															</select>
														</div>
														<div class="col-xs-2">
															<button type="button" id="right_All_1"
																class="btn btn-block">
																<i class="glyphicon glyphicon-forward"></i>
															</button>
															<button type="button" id="right_Selected_1"
																class="btn btn-block">
																<i class="glyphicon glyphicon-chevron-right"></i>
															</button>
															<button type="button" id="left_Selected_1"
																class="btn btn-block">
																<i class="glyphicon glyphicon-chevron-left"></i>
															</button>
															<button type="button" id="left_All_1"
																class="btn btn-block">
																<i class="glyphicon glyphicon-backward"></i>
															</button>
														</div>
														<div class="col-xs-5">
															<select name="to[]" id="multiselect_to_1"
																class="form-control" size="8" multiple="multiple"></select>
														</div>
													</div>
													<!-- -------------------------------------------------------------- -->



													<!-- -------------------------------------------------------------- -->

													<br>
													<div class="row">
														<div class="col-lg-6">
															<input class="form-control" type="date" id="startDate"
																placeholder="Start Date" name="startdate" size="20" />

															<!-- <div class="control-group">
        <label for="startDate" class="control-label"></label>
        <div class="controls">
            <div class="input-group">
                <input id="startDate" type="date" class="date-picker form-control" name="startdate"  placeholder="Start Date" onfocus="myFunction(this)"/>
                <label for="startDate" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>

                </label>
            </div>
        </div>
    </div>
 -->
															<!-- <input type="date" id="startDate" class="form-control" name="startdate"  placeholder="Start Date" size="20">
    <label class="input-group-addon btn" for="date">
       <span class="fa fa-calendar open-datetimepicker"></span>
    </label> -->
														</div>
														<div class="col-lg-6">
															<input class="form-control" type="date" id="dueDate"
																placeholder="Due Date" name="duedate" size="20" />

															<!-- <div class="control-group">
        <label for="dueDate" class="control-label"></label>
        <div class="controls">
            <div class="input-group">
                <input id="dueDate" type="date" class="date-picker form-control" name="duetdate"  placeholder="Due Date" />
                <label for="dueDate" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>

                </label>
            </div>
        </div>
    </div> -->
														</div>
													</div>


													<!-- <select name="Status" placeholder="Status">
<option>Not started</option>
<option>In Progress</option>
<option>Completed</option>
<option>Waiting on someone else</option>
<option>Deferred</option>
</select>
<br/> -->
													<div class="row">
														<div class="col-lg-4">
															<div class="form-group">

																<label for="status"></label> <select
																	class="form-control placeholder" id="status"
																	name="Status">
																	<option value="" disabled selected>Status</option>
																	<option>Not started</option>
																	<option>In Progress</option>
																	<option>Completed</option>
																	<option>Deferred</option>
																</select>
															</div>
														</div>

														<div class="col-lg-4">
															<div class="form-group">
																<label for="priority"></label> <select
																	class="form-control placeholder" id="priority"
																	name="Priority">
																	<option value="" disabled selected>Priority</option>
																	<option>Normal</option>
																	<option>Low</option>
																	<option>High</option>
																</select>
															</div>
														</div>

														<div class="col-lg-4">
															<div class="form-group">
																<label for="percentageComplete"></label> <select
																	class="form-control placeholder" id="percentage"
																	name="percentageComplete">
																	<option value="" disabled selected>Percentage
																		Complete</option>
																	<option>0</option>
																	<option>25</option>
																	<option>50</option>
																	<option>75</option>
																	<option>100</option>
																</select>
															</div>
														</div>
													</div>

													<!-- <label for="chkReminder">
    <input type="checkbox" id="chkReminder" name ="checkBox" class="form-control"/>
</label>        
 -->
													<div class="form-group">

														<!-- <div class="col-lg-3">
 Reminder
 </div> -->
														<!-- <label >
<input type="checkbox" class="form-control" id="chkReminder" name ="checkBox" autocomplete="off" >Reminder</br>
</label>
 -->

														<div class="row">
															<div class="col-lg-3">
																<p>Reminder</p>
															</div>
															<div class="col-lg-1">
																<input type="checkbox" class="form-control"
																	id="chkReminder" name="checkBox" autocomplete="off">
															</div>

															<div class="col-lg-4">
																<input type="date" id="reminder" name="Reminder"
																	disabled="disabled" class="form-control"
																	placeholder="Reminder Date" />
															</div>
															<div class="col-lg-4">
																<select class="form-control placeholder"
																	name="ReminderTime" id="reminderTime"
																	disabled="disabled" placeholder="Reminder Time">
																	<option value="" disabled selected>Reminder
																		Time</option>
																	<option>12:00 AM</option>
																	<option>12:30 AM</option>
																	<option>1:00 AM</option>
																	<option>1:30 AM</option>
																	<option>2:00 AM</option>
																	<option>2:30 AM</option>
																	<option>3:00 AM</option>
																	<option>3:30 AM</option>
																	<option>4:00 AM</option>
																	<option>4:30 AM</option>
																	<option>5:00 AM</option>
																	<option>5:30 AM</option>
																	<option>6:00 AM</option>
																	<option>6:30 AM</option>
																	<option>7:00 AM</option>
																	<option>7:30 AM</option>
																	<option>8:00 AM</option>
																	<option>8:30 AM</option>
																	<option>9:00 AM</option>
																	<option>9:30 AM</option>
																	<option>10:00 AM</option>
																	<option>10:30 AM</option>
																	<option>11:00 AM</option>
																	<option>11:30 AM</option>
																	<option>12:00 PM</option>
																	<option>12:30 PM</option>
																	<option>1:00 PM</option>
																	<option>1:30 PM</option>
																	<option>2:00 PM</option>
																	<option>2:30 PM</option>
																	<option>3:00 PM</option>
																	<option>3:30 PM</option>
																	<option>4:00 PM</option>
																	<option>4:30 PM</option>
																	<option>5:00 PM</option>
																	<option>5:30 PM</option>
																	<option>6:00 PM</option>
																	<option>6:30 PM</option>
																	<option>7:00 PM</option>
																	<option>7:30 PM</option>
																	<option>8:00 PM</option>
																	<option>8:30 PM</option>
																	<option>9:00 PM</option>
																	<option>9:30 PM</option>
																	<option>10:00 PM</option>
																	<option>10:30 PM</option>
																	<option>11:00 PM</option>
																	<option>11:30 PM</option>
																	<option>11:35 PM</option>
																</select>
															</div>
														</div>
													</div>
																										<div class="row-fluid">

														<div class="col-md-12" style="margin: 0px; padding: 0px;">
															<textarea name="comments" class="form-control"
																placeholder="Please give your comment..." id="comments"></textarea>
															<!-- <textarea id = "comments"></textarea> -->
														</div>
													</div>

													<div class="row">
													<div class="files" id="attachFilesContainer">
														<input id="infringementFiles" type="file" multiple
															class="multi browsebtn">
													</div>
														<input type="file" id="files" name="files" multiple>
													</div>
													<input type="button" id="Submit" value="Send"
														class=.form-control></label>

												</form>

											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" id="closebtn"
													data-dismiss="modal">Close</button>
											</div>
										</div>

									</div>
								</div>

							</div>


						</div>
						<br /> <br />
					</div>
					<div class="row ">
						<div class=" list-group col-md-12 col-lg-12"
							style="padding-left: 20px">

							<table id="example" class="table table-striped table-bordered"
								cellspacing="0" width="100%">
								<thead>
									<tr>

										<th>Project Name</th>
										<th>Subject</th>
										<th>Start Date</th>
										<th>Due Date</th>
										<th>Status</th>
										<th>Priority</th>
										<th>PercentageComplete</th>
									</tr>
								</thead>
								<!-- <tfoot>
									<tr>
										<th>Project Name</th>
										<th>Subject</th>
										<th>Start Date</th>
										<th>Due Date</th>
										<th>Status</th>
										<th>Priority</th>
										<th>PercentageComplete</th>
									</tr>
								</tfoot> -->
								<tbody>
									<c:forEach items="${mytaskDTO}" var="mytask">

										<tr>
											<td><c:out value="${mytask.projectName}" /></td>
											<td><c:out value="${mytask.subject}" /></td>
											<td><c:out value="${mytask.startDate}" /></td>
											<td><c:out value="${mytask.dueDate}" /></td>
											<td><c:out value="${mytask.status}" /></td>
											<td><c:out value="${mytask.priority}" /></td>
											<td><c:out value="${mytask.percentageComplete}" /></td>
										</tr>

									</c:forEach>
									<!-- <tr data-ng-repeat="taskData in allTaskList">
            <td value="{{taskData.projectName}}">{{taskData.projectName}}</td>
            <td value="{{taskData.subject}}">{{taskData.subject}}</td>
            <td value="{{taskData.startDate}}">{{taskData.startDate}}</td>
            <td value="{{taskData.dueDate}}">{{taskData.dueDate}}</td>
            <td value="{{taskData.status}}">{{taskData.status}}</td>
            <td value="{{taskData.priority}}">{{taskData.priority}}</td>
            <td value="{{taskData.percentageComplete}}">{{taskData.percentageComplete}}</td>
            </tr>
									<tr>
            <td> </td>
            <td> </td>
           <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            </tr> -->
								</tbody>
							</table>

							<!--   <a
                                         class="list-group-item list-group-item-danger taskWithBottmPad clearfix vertical-align"
                                         href="#">
                                         <div class="vertical-align">
                                                <img src="http://placehold.it/40x40" id="profileimage"
                                                       class="img-circle  pull-left" alt="Responsive image"> <span
                                                       class="list-group-item-heading taskWithPad">Complete The
                                                       task</span>
                                                <p class="text-sm text-muted"> Assigned by Santosh</p>
                                                <span class="label label-default label-pill pull-right">14</span>
                                         </div>
                                  </a>


                                  Add drop down menu


                                  <a
                                         class="list-group-item list-group-item-success taskWithBottmPad clearfix"
                                         href="#"> <img src="http://placehold.it/40x40"
                                         id="profileimage" class="img-responsive  img-circle   pull-left "
                                         alt="Responsive image"> <span
                                         class="list-group-item-heading taskWithPad">Complete The
                                                task</span> <p class="text-sm text-muted"> Assigned by Santosh</p>
                                         <span class="label label-default label-pill pull-right">14</span>
                                  </a> <a
                                         class="list-group-item list-group-item-success taskWithBottmPad clearfix"
                                         href="#"> <img src="http://placehold.it/40x40"
                                         id="profileimage" class="img-responsive  img-circle  pull-left"
                                         alt="Responsive image"> <span
                                         class="list-group-item-heading taskWithPad">Complete The
                                                task</span> <p class="text-sm text-muted"> Assigned by Santosh</p>
                                         <span class="label label-default label-pill pull-right">14</span>
                                  </a>
 -->

						</div>
					</div>

				</div>

			</div>
			<nav class='sidebar sidebar-menu-collapsed'>
				<a href='' id='justify-icon'> <span id="navMenu"
					class='glyphicon glyphicon-align-justify'></span>
				</a>

				<ul>
					<li class='active'><a class='expandable' href=''
						title='My Tasks'> <span
							class='glyphicon glyphicon-home collapsed-element'></span> <span
							class='expanded-element'>My Tasks</span>
					</a></li>

					<li class="dropdown">
						<div data-ng-init="getProjectDataFromServer()">
							<a class='expandable dropdown-toggle' data-toggle="dropdown"
								href='#' title='Projects'> <span
								class='glyphicon glyphicon-cloud collapsed-element'></span> <span
								class='expanded-element'>Projects</span> <span class="caret"></span></a>

							<ul class="dropdown-menu">

								<li data-ng-repeat="projectData in ls"
									value="{{projectData.projectId}}"><a
									ng-href="getProjectTask?prjectId={{projectData.projectId}}">{{projectData.projectName}}</a></li>
							</ul>

						</div>
					</li>
					<li class="dropdown"><a class='expandable dropdown-toggle'
						data-toggle="dropdown" href='#' title='My Dues'> <span
							class='glyphicon glyphicon-tags collapsed-element'></span> <span
							class='expanded-element'>My Dues</span> <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#"><span class="glyphicon glyphicon-star"></span>Due
									today</a></li>
							<li><a href="#">Due This Week</a></li>
							<li><a href="#">Due Later</a></li>
						</ul></li>
					<li><a class='expandable' href='#' title='Urgents'> <span
							class='fa fa-bolt collapsed-element'></span> <span
							class='expanded-element'>Urgents</span>
					</a></li>
					<li><a class='expandable' href='#' title='Statistics'> <span
							class='glyphicon glyphicon-stats collapsed-element'></span> <span
							class='expanded-element'>Statistics</span>
					</a></li>

					<li><a class='expandable' href='#' title='Account'> <span
							class='glyphicon glyphicon-user collapsed-element'></span> <span
							class='expanded-element'>Account</span>
					</a></li>
				</ul>
				<a href='#' id='logout-icon' title='Logout'> <span
					class='glyphicon glyphicon-off'></span>
				</a>
			</nav>

			<!-- <script src="//code.jquery.com/jquery-1.12.2.min.js"></script> -->
</body>
</html>
